<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Infinite Scroll - Cck button to start loading on scroll</title>
<style>
  .page-load-status {
    display: none; /* hidden by default */
    padding-top: 20px;
    border-top: 1px sod #DDD;
    text-agn: center;
    color: #777;
  }
</style>

</head>
<body>
<h1>Infinite Scroll - Cck button to start loading on scroll</h1>
<div class="list_picnews">
  <li class="post">
    <h1>1a - Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing et. Nunc tristique mauris nec sapien efficitur, sit amet varius est interdum. Curabitur quis sem fes. Curabitur at quam sit amet mi tempor tristique quis in lorem. Cras id fes sit amet erat accumsan ornare.</p>
    <p><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg" alt="orange-tree" /></p>
    <p>Class aptent taciti sociosqu ad tora torquent per conubia nostra, per inceptos himenaeos.</p>
    <p>Nullam vel odio nec turpis consequat iacus at ut nibh. Nulla interdum lacus vitae sapien porttitor congue sagittis ac fes.Curabitur in gula porttitor, varius purus sed, elementum nibh. Nunc ut bero posuere.</p>
  </li>
  <li class="post">
    <h1>1b - Ullamcorper quam at</h1>
    <p>Ullamcorper quam at, hendrerit eros. Mauris quis vehicula enim.</p>
    <p><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/cat-nose.jpg" alt="cat nose"></p>
    <p>Duis elementum nisi tortor, ut elementum quam mattis condimentum. Aenean vitae massa sit amet gula solcitudin venenatis. Praesent ultrices laoreet hendrerit. Duis tempus ullamcorper enim, ac volutpat augue faucibus sit amet.</p>
    <p>Donec at consequat et. Suspendisse dignissim ante vitae urna rutrum cursus. Morbi finibus semper facisis. In varius sem ut turpis molestie volutpat. Duis ut posuere est. Lorem ipsum dolor sit amet, consectetur adipiscing et. Duis malesuada placerat luctus. In eget feugiat sapien. Sed gravida ultrices accumsan.</p>
    <p>In nec ex at mi scelerisque malesuada.</p>
    <p>Nullam arcu diam, mols sit amet condimentum et, finibus in ex. Morbi bibendum magna vel tortor fringilla efficitur. Aquam sed lectus lacus.</p>
  </li>
  <li class="post">
    <h1>1c - Orci varius natoque penatibus et magnis dis parturient montes</h1>
    <p>Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In varius turpis ipsum, et porta eros eleifend ullamcorper. Sed arcu nisl, rhoncus porta fermentum in, eleifend non dolor.</p>
    <p>Mauris sagittis a lectus eu fringilla. Maecenas varius cursus aquam.</p>
    <p>Suspendisse maximus congue augue eu venenatis. Aquam urna purus, suscipit ut purus vel, iacus rhoncus nulla. Donec a vet elementum, pellentesque metus blandit, lacinia erat. Fusce pulvinar mattis erat ac efficitur. Pellentesque aquam eleifend gula, eu ullamcorper et pretium sit amet.</p>
    <p>Praesent placerat eros sem, vel pretium bero pharetra nec. Morbi hendrerit eleifend commodo. Morbi sodales nunc purus, consequat eleifend nulla dignissim non.</p>
  </li>
  <li class="post">
    <h1>1d - Donec a urna in turpis maximus</h1>
    <p>Donec a urna in turpis maximus faucibus a nec mauris.</p>
    <p>Donec iacus, justo a egestas venenatis, dui nisl faucibus urna, sit amet condimentum quam dui ut bero. Etiam aquet urna quis nisi aquam, vitae tincidunt est feugiat.</p>
    <p>Integer viverra at arcu quis faucibus. Praesent nec venenatis odio. Donec non mattis massa, quis vestibulum leo. Etiam eleifend diam ac magna egestas aquam. Sed vulputate risus eget efficitur auctor. Mauris aquam ac purus at semper. Praesent vulputate hendrerit eros, vitae semper turpis venenatis et. Proin et est fes. Etiam sem risus, elementum id cursus quis, laoreet quis orci. Cras eget fermentum lorem, vitae pharetra augue. Etiam tincidunt nulla faucibus, egestas lacus sed, semper metus.</p>
  </li>
</div>

<div class="page-load-status">
  <div class="infinite-scroll-request">
    <img src="../../images/loading.gif" alt="Loading" />
    Loading...
  </div>
  <p class="infinite-scroll-last">已经到最后了</p>
  <p class="infinite-scroll-error">没有更多页面加载</p>
  <div class="pages">1,2,3,4,5,6,下一页</div>
</div>

<p >
  <a href="##" class="view-more-button">View more</a>
</p>

<script src='../../js/jquery-1.10.2.min.js'></script>
<script src='js/infinite.min.js'></script>

<script >



    $('.list_picnews').infiniteScroll({
        path: function() {
            var pageNumber = ( this.pageIndex - 1 );//pageIndex页面索引默认是1；loadCount是加载的数量，默认是0。
            //var pageNumber = ( <?=ehtmlspecialchars($_GET[page])?> + this.pageIndex );帝国里使用，从当前页开始加载。$_GET[page]获得链接page=xxx值
            return 'http://localhost/e/action/ListInfo/?page=' + pageNumber + '&classid=73';
        },
        append: '.infinite_block',
        scrollThreshold: false,
        status: '.page-load-status',
        button: '.view-more-button',

    });


</script>

</body>
</html>
